<template>
  
  <div class="scene" @mousedown="startRotate" @mouseup="stopRotate" @mousemove="rotateBox" @mouseleave="stopRotate"
  @touchstart="startRotate" @touchend="stopRotate" @touchmove="rotateBox">
    <h1 class="title">凹兔基给你的一个包裹</h1>
    <div class="navbar" @click="go_back()">
        <img src="../assets/img/daohang.png" alt="导航" class="navbar_img">
    </div>
    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <div class="gift-box" :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)` }" @click="toggleLid">
        <div class="face front" :class="{ open: isOpen }"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
        <div class="letter" v-if="isOpen" @click.stop="showModal = true"></div> <!-- 添加信件 -->
      </div>
    </div>
  </div>
  <Modal v-if="showModal" @close="showModal = false">
    <template #header>祝福信件</template>
    <template #body>
      <h2>{{ letterTitle }}</h2>
      <p>&nbsp;&nbsp;{{ letterContent }}</p>
      <p style="text-align: right;"><strong>发件人:</strong> {{ attributeName }}</p>
      <p style="text-align: right;"><strong>日期:</strong> {{ date }}</p>
    </template>
  </Modal>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import Modal from '../components/LetterModel.vue'; // 假设你有一个模态框组件

const isOpen = ref(false);
const showModal = ref(false);

const letterTitle = ref("亲爱的朋友");
const letterContent = ref("愿你在岁月的长河中，找到属于自己的那片宁静。愿每一个清晨的阳光，都能照亮你心中的梦想。愿你在这纷繁的世界中，始终保持一颗纯净的心。");
const attributeName = ref("凹兔基");
const date = ref("2025年1月03日");

function toggleLid() {
  isOpen.value = !isOpen.value;
}

const rotateX = ref(30);
const rotateY = ref(30);
let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;

function startRotate(event) {
  isDragging = true;
  const touch = event.touches ? event.touches[0] : event;
  lastMouseX = touch.clientX;
  lastMouseY = touch.clientY;
}

function stopRotate() {
  isDragging = false;
}

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

function go_back(){
    // 返回上一页
    router.push({ path: '/' })
}
function rotateBox(event) {
  if (!isDragging) return;

  const touch = event.touches ? event.touches[0] : event;
  const deltaX = touch.clientX - lastMouseX;
  const deltaY = touch.clientY - lastMouseY;

  rotateY.value += deltaX * 0.5;
  rotateX.value -= deltaY * 0.5;

  lastMouseX = touch.clientX;
  lastMouseY = touch.clientY;
}
</script>

<style lang="scss" scoped>
.scene {
  perspective: 1000px;
  position: relative;
  height: 100vh;
  background: linear-gradient(135deg, #f5f5dc, #d2b48c); // 使用渐变背景
}
.title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  width: fit-content;
  padding: 5px;
  box-sizing: border-box;
  color: #8b4513;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); // 添加文字阴影
}
.navbar {
  z-index: 99;
  position: fixed;
  top: 23px;
  left: 20px;
  width: 15px;
  height: 15px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  animation: slideIn 0.5s ease-out;

  &:hover {
    transform: rotate(90deg);
    background: white;
  }

  .navbar_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.gift-box {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  transform-origin: center;
  transition: transform 0.5s, box-shadow 0.5s;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); // 增加阴影
  background: linear-gradient(145deg, #d2b48c, #deb887); // 使用渐变色
  border-radius: 10px; // 增加圆角
}

.face {
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(145deg, #deb887, #d2b48c); // 使用渐变色
  border: 2px solid #8b4513;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px; // 增加圆角
}

.front  { transform: translateZ(60px);transform-origin: top center; transition: transform 0.5s;}
.back   { transform: rotateY(180deg) translateZ(60px); }
.left   { transform: rotateY(-90deg) translateZ(60px); }
.right  { transform: rotateY(90deg) translateZ(60px); }
.top    { transform: rotateX(90deg) translateZ(60px); }
.bottom { transform: rotateX(-90deg) translateZ(60px); }
.letter {
  cursor: pointer;
  position: absolute;
  top: 32px;
  left: 15px;
  width: 80px;
  height: 50px;
  background-color: #fff8dc;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateZ(30px) translateY(-20px) rotateX(-10deg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #333;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
  border-radius: 5px;
  padding: 5px;
  font-family: 'Courier New', Courier, monospace;
  background-image: url('../assets/img/letter_1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: float 3s ease-in-out infinite; // 添加浮动动画
}

@keyframes float {
  0%, 100% {
    transform: translateY(-20px) translateZ(30px) rotateX(-10deg);
  }
  50% {
    transform: translateY(-25px) translateZ(30px) rotateX(-10deg);
  }
}

.front.open {
  transform: rotateX(90deg) translateY(60px) translateZ(0px);
}

.letter {
  opacity: 1; // 打开时显示信件
}
</style>